<script type="text/javascript">
    function __validate() {
        var form = document.getElementById('form-recap');
        if (form.mode.value == 1) {
            // daily
            if (!form.recapDate.value) {
                alert('<!--MESSAGE-DAILY-->');
                form.recapDate.focus();
                return false;
            }
        } else if (form.mode.value == 2) {
            if (!form.startDate.value) {
                alert('<!--MESSAGE-WEEKLY-->');
                form.startDate.focus();
                return false;
            }
        } else if (form.mode.value == 3) {
            if (!form.recapYear.value) {
                alert('<!--MESSAGE-MONTHLY-YEAR-->');
                form.recapYear.focus();
                return false;
            }
            if (!form.recapMonth.value) {
                alert('<!--MESSAGE-MONTHLY-MONTH-->');
                form.recapMonth.focus();
                return false;
            }
        } else if (form.mode.value == 4) {
            if (!form.recapYear.value) {
                alert('<!--MESSAGE-YEARLY-->');
                form.recapYear.focus();
                return false;
            }
        } else {
            if (!form.startDate.value && !form.endDate.value) {
                alert('<!--MESSAGE-CUSTOM-->');
                return false;
            }
        }
        <!--WARNING-->
        return true;
    }

</script>
<form name="form-recap" id="form-recap" method="post" action="" onsubmit="return __validate()">
    
    <div class="form">
         <select name="unit" class="form-input">
            <!--SELECT-UNIT-VALUES-->
        </select>
        <select name="employee" class="form-input">
            <!--SELECT-EMPLOYEE-VALUES-->
        </select>
        
        <!--SELECT-MODE-->:
        <select name="mode" class="form-input" onchange="location.href=<!--SELECT-MODE-ONCHANGE-->">
            <!--SELECT-VALUES-->
        </select>
        <!--SELECT-FILTER-->:
        <select name="filter" class="form-input">
            <!--SELECT-FILTER-VALUES-->
        </select>
        <!--MODE-DAILY-BEGIN-->
        <!--DAILY-SELECT-DATE-->:
        <input type="text" size="10" readonly class="form-input" id="recapDate"  name="recapDate" value="<!--DAILY-DATE-VALUE-->" readonly>
        <input type="button" value="" class="form-button-date" onclick="__popupDate('recapDate', 'no')">
        <!--MODE-DAILY-END-->
        <!--MODE-WEEKLY-BEGIN-->
        <!--WEEKLY-SELECT-START-DATE-->:
        <input type="text" size="10" readonly class="form-input" id="startDate"  name="startDate" value="<!--WEEKLY-START-DATE-VALUE-->" readonly>
        <input type="button" value="" class="form-button-date" onclick="__popupDate('startDate', 'no')">
        <!--MODE-WEEKLY-END-->
        <!--MODE-MONTHLY-BEGIN-->
        <!--MONTHLY-SELECT-YEAR-->:
        <select name="recapYear" class="form-input">
            <!--MONTHLY-SELECT-YEAR-VALUES-->:
        </select>
        <!--MONTHLY-SELECT-MONTH-->:
        <select name="recapMonth" class="form-input">
            <!--MONTHLY-SELECT-MONTH-VALUES-->:
        </select>
        <!--MODE-MONTHLY-END-->
        <!--MODE-YEARLY-BEGIN-->
        <!--YEARLY-SELECT-YEAR-->:
        <select name="recapYear" class="form-input">
            <!--YEARLY-SELECT-YEAR-VALUES-->:
        </select>
        <!--MODE-YEARLY-END-->
        <!--MODE-CUSTOM-BEGIN-->
        <!--CUSTOM-SELECT-START-DATE-->:
        <input type="text" size="10" readonly class="form-input" id="startDate"  name="startDate" value="<!--CUSTOM-START-DATE-VALUE-->" readonly>
        <input type="button" value="" class="form-button-date" onclick="__popupDate('startDate', 'no')">
        <!--CUSTOM-SELECT-END-DATE-->:
        <input type="text" size="10" readonly class="form-input" id="endDate"  name="endDate" value="<!--CUSTOM-END-DATE-VALUE-->" readonly>
        <input type="button" value="" class="form-button-date" onclick="__popupDate('endDate', 'no')">
        <!--MODE-CUSTOM-END-->
        <input type="submit" name="submit" class="form-button-search" value="<!--BUTTON-SEARCH-->">
        <!--RECAP-EXPORT-BEGIN-->
        <a target="_blank" href="<!--RECAP-EXPORT-LINK-->"><img class="command" border="0" src="?image=command-pdf.png" title="Export"></a>
        <!--RECAP-EXPORT-END-->
        <div style="float: right; border: 1px dotted darkgrey; padding: 5px;">
            <!--RECORD-->
        </div>
        
    </div>
    <div>
        <!--LIST-DATA-->
    </div>
    <!--TOTAL-BEGIN-->
    <div style="float: right; font-size: 14px; font-weight: normal; ">
        <!--TOTAL-CAPTION-->
        <span style="font-size: 14px; font-weight: bold; border: 1px dotted darkgrey; padding: 5px;">
            <!--TOTAL-TEXT-->
        </span>
    </div>
    <!--TOTAL-END-->
</form>
